<template>
  <!-- 容器:具有一定高度 -->
  <div class="box" ref="lineContainer">专门开发折线图</div>
</template>

<script setup lang="ts">
//引入echarts插件
import * as echarts from "echarts";
//引入组合式API值onMounted
import { onMounted, ref, watch } from "vue";
//获取容器DOM节点
const lineContainer = ref();

let mycharts: any;
//在钩子初始化echarts类的实例
onMounted(() => {
  //初始化echarts图形图标
  initLineChart();
});
//功能函数初始化echarts图标
const initLineChart = () => {
  mycharts = echarts.init(lineContainer.value);
  mycharts.setOption({
    xAxis: {
      //隐藏x轴
      show: false,
      // 均匀分布
      type: "category",
      //两侧留白取消
      boundaryGap: false,
      //指示器
      axisPointer: {
        show: true,
        type: "line",
      },
    },
    yAxis: {
      show: false,
    },
    //布局组件
    grid: {
      show: true,
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      //网格背景颜色
      backgroundColor: "skyblue",
    },
    //系列
    series: [
      {
        type: "line",
        data: props.data,
        //平滑曲线
        smooth: true,
        //标记图形消息
        symbol: "none",
        //折线底部的填充区域
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    //提示框组件
    tooltip: {
      //显示提示框在图形里面
      confine: true,
      //背景颜色
      backgroundColor: "rgba(0,0,0,0.3)",
      //字体设置
      textStyle: {
        color: "white",
      },
    },
  });
};
window.addEventListener("resize", () => {
  //视图自适应
  mycharts.resize();
});
//接受父亲传递过来折线图的数据
const props = defineProps(["data"]);
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
